<template>
	<view class="componentBox" v-if="isWatermark">
		<view class="backgroundBox">
			<view class="background" v-for="item in domList" :style="[item]" :key="item.index">{{ watermarkText }}
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex";
	export default {
		components: {},
		props: {
			content: {
				type: String,
				default: "水印",
			},
			zIndex: {
				type: Number,
				default: 999,
			},
			gapX: {
				type: Number,
				default: 0,
			},
			gapY: {
				type: Number,
				default: 20,
			},
			width: {
				type: Number,
				default: 0,
			},
			height: {
				type: Number,
				default: 80,
			},
			alpha: {
				type: Number,
				default: 0.3,
			},
			color: {
				type: String,
				default: "#aaa",
			},
			fontSize: {
				type: Number,
				default: 28,
			},
			angle: {
				type: Number,
				default: 20,
			},
		},
		data() {
			return {
				isWatermark: false,
				domList: [],
				watermarkText: ''
			};
		},
		computed: {},
		methods: {
			initData() {
				uni.getSystemInfo({
					success: res => {
						let {
							screenWidth,
							screenHeight
						} = res;
						let {
							gapX = 0, gapY = 0, width, height, color, alpha, fontSize, angle, zIndex
						} = this;

						let heightNum = Math.ceil(screenHeight / (gapY * 2 + height));
						let widthNum = Math.ceil(screenWidth / (gapX * 2 + (width || screenWidth / 2)));

						let num = heightNum * widthNum;

						for (let i = 0; i < num; i++) {
							let mask_div = {};
							mask_div.transform = "rotate(-" + angle + "deg)";
							mask_div.visibility = "";
							mask_div.overflow = "hidden";
							mask_div.margin = `${gapY}px ${gapX}px`;
							mask_div.zIndex = zIndex;
							mask_div.pointerEvents = "none";
							mask_div.opacity = alpha;
							mask_div.fontSize = `${fontSize}rpx`;
							mask_div.fontFamily = "微软雅黑";
							mask_div.color = color;
							mask_div.width = (width || screenWidth / 2) + "px";
							mask_div.height = height + "px";
							mask_div.index = i;

							this.domList.push(mask_div);
						}
					},
				});
			},
			formatDate(date) {
				const day = date.getDate().toString().padStart(2, '0');
				const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
				const year = date.getFullYear();
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');

				// return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return `${year}-${month}-${day}`;
			}
		},
		created() {},
		computed: {
			...mapState(["loginInfo"]),
		},
		mounted() {
			this.initData();
			this.isWatermark = this.loginInfo.isWatermark
			console.log('loginInfo', this.loginInfo);
			console.log('isWatermark', this.isWatermark);
			this.watermarkText = this.loginInfo.realName ? this.loginInfo.realName + ' ' + this.formatDate(
				new Date()) || '禁止截屏' : '';
		},
		onLoad(options) {

		},
		onShow() {},
		destroyed() {}
	};
</script>

<style scoped lang="scss">
	.componentBox {
		position: relative;
		width: 100vw;

		.backgroundBox {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			pointer-events: none;
			display: flex;
			flex-wrap: wrap;
			z-index: 10;

			.background {
				box-sizing: border-box;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				pointer-events: none;
				background-attachment: fixed;
				background-repeat: repeat;
				background-origin: content-box;
				background-position: center;
			}
		}
	}
</style>